<template>
    <component
        ref="chartComponent"
        :config="config"
        :is="chartComponent"
        @setChartComponent="setChartComponent"
        class="pie-wrap">
    </component>
</template>

<script>
/**
 * 自定义页面(图表)
 */
import  chartComponents from "./chartComponent/index.js"
import BusEvent from "../BusEvent";
export default {
    name: "chartView",
    mixins:[chartComponents,BusEvent],
    props: {
        config:{
            type:Object,
            default:{}
        },
    },
    data() {
        return {
            chartComponent:"",
        }
    },
    created() {
        this.setChartComponent(this.config);
    },
    methods: {
        setChartComponent(config){
            if(config.reportType){
                this.chartComponent = config.reportType+"Component";
            }
        },
        handPublicReceive(conf){
            if(this.$refs.chartComponent.handPublicReceive){
                this.$refs.chartComponent.handPublicReceive(conf);
            }
        }
    },
    watch: {
        config:{
            handler: function (val, oldVal) {
                if(val){
                    this.setChartComponent(val);
                }
            },
            deep: true
        }
    },
}
</script>

<style scoped>
.pie-wrap {
    width: 100%;
    height: 100%;
    border: 1px solid #dadde0;
    background: #fff;
    display: flex;
    padding: 1rem;
    flex-direction: column;
    box-sizing: border-box;
}
</style>
